﻿<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="chart-content">
      <div class="filter-title">
        <el-form label-position="right">
          <el-form-item>
            <el-input v-model="listQuery.order_no"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('application.code')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="listQuery.itoc_name"
                      style="width: 160px; height:32px;"
                      class="filter-item"
                      :placeholder="$t('operations.searchName')"
                      @keyup.enter.native="handleFilter"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.status"
                       style="width: 160px; height:32px;"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in statusOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div class="search-button"
               @click="handleFilter">
            <img src="@/assets/images/bg_search@2x.png" />
          </div>
          <div class="search-button"
               @click="handleRefresh">
            <img src="@/assets/images/bg_reset@2x.png" />
          </div>
          <div class="search-button"
               @click="searchItem">
            <img v-show="showSearchItem === true"
                 src="@/assets/images/bg_more@2x.png" />
            <img v-show="showSearchItem === false"
                 src="@/assets/images/bg_sx@2x.png" />
          </div>
        </el-form>
        <div class="filter-right">
          <div class="add-button"
               @click="handleCreate">
            <img src="@/assets/images/icon_add@2x.png" />
            <span>新建</span>
          </div>
        </div>
      </div>
      <div v-show="showSearchItem"
           class="filter-container">
        <el-form>
          <el-form-item>
            <el-select v-model="listQuery.type"
                       style="width: 160px; height:32px;"
                       clearable
                       placeholder="请选择">
              <el-option v-for="item in typeOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="chart-list">
        <el-table :key="tableKey"
                  v-loading="listLoading"
                  :data="list"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255,255,255,0.2)"
                  border
                  fit
                  highlight-current-row
                  style="width: 100%min-height:1000px">
          <el-table-column fixed="left"
                           align="center"
                           :label="$t('table.id')"
                           width="65">
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('order.no')">
            <template slot-scope="scope">
              <span>{{ scope.row.order_no }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.requestData')">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.reviewData')">
            <template slot-scope="scope">
              <span>{{ scope.row.check_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('application.name')">
            <template slot-scope="scope">
              <span>{{ scope.row.proposer_nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.category')">
            <template slot-scope="scope">
              <span>{{ scope.row.category_name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('terminal.number')">
            <template slot-scope="scope">
              <span>{{ scope.row.equipment_count }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.number_1')">
            <template slot-scope="scope">
              <span>{{ scope.row.goods_count }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('application.type')">
            <template slot-scope="scope">
              <span>{{ effectiveEs(scope.row.type) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('public.status')">
            <template slot-scope="scope">
              <span>{{ applicationEs(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           show-overflow-tooltip
                           :label="$t('goods.minStockAlarm')">
            <template slot-scope="scope">
              <el-button type="primary">{{ $t('table.processInformation') }} </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           :label="$t('table.actions')"
                           class-name="small-padding fixed-width"
                           fixed="right">
            <template slot-scope="scope">
              <div class="read-img"
                   @click="handleRead(scope.row)">
                <img src="@/assets/images/read@2x.png" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background
                       :current-page="listQuery.page"
                       :page-sizes="[10, 20, 30, 50]"
                       :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"></el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog :title="textMap[dialogStatus]"
                 :visible.sync="dialogChartFormVisible">
        <div class="popup-form">
          <div class="headerless-form">
            <div class="from-title">调价单号:&nbsp; {{ temp.order_no }}</div>
            <div class="from-content">
              <div>
                状态:&nbsp; {{ applicationEs(temp.status) }}
              </div>
              <div>
                申请时间：&nbsp; {{ temp.create_time }}
              </div>
              <div>
                审核时间:&nbsp; {{ temp.check_time }}
              </div>
            </div>
          </div>
          <div class="from-banner"></div>
          <div class="header-form">
            <div class="from-item">
              <div class="from-header">
                <div>所属运营中心</div>
                <div>申请人</div>
                <div>商圈</div>
                <div>终端类别</div>
                <div>终端编号</div>
                <div>生效类型</div>
              </div>
              <div class="from-content">
                <div>{{ temp.itoc_name }}</div>
                <div>{{ temp.proposer_nickname }}</div>
                <div>{{ temp.merchant_circle_name }}</div>
                <div>{{ temp.category_name }}</div>
                <div>{{ temp.equipment_code }}</div>
                <div>{{ effectiveEs(temp.type) }}</div>
              </div>
            </div>
          </div>
          <div class="from-banner"></div>
          <div class="header-form">
            <div class="from-item">
              <div class="from-header">
                <div>商品名称</div>
                <div>商品编码</div>
                <div>品牌</div>
                <div>规格</div>
                <div>单位</div>
                <div>调前价</div>
                <div>调后价</div>
              </div>
              <div class="from-content"
                   v-for="(items, index) in temp.list"
                   :key="index">
                <div>{{ items.goods_name }}</div>
                <div>{{ items.goods_code }}</div>
                <div>{{ items.brand_name }}</div>
                <div>{{ items.attribute }}</div>
                <div>{{ items.units_name }}</div>
                <div>{{ items.old_price }}</div>
                <div>{{ items.new_price }}</div>
              </div>
              <div class="from-footer">
                <div class="remark">调价理由: <span class="remark-content">{{ temp.adjust_reason }}</span></div>
                <div class="total">
                </div>
              </div>
            </div>
          </div>
          <div class="headerless-form">
            <div class="from-title">审核备注</div>
            <div class="from-item">
              <el-input v-model="temp.check_remark"
                        type="textarea"></el-input>
            </div>
          </div>
        </div>
        <div class="footer-banner">
        </div>
        <div slot="footer"
             class="dialog-footer">
          <div>
            <el-button v-show="dialogStatus == 'read' && temp.status === 1"
                       type="primary"
                       @click="handleReview">{{ $t("table.review") }}</el-button>
            <el-button v-show="dialogStatus == 'review' && temp.status === 1"
                       type="primary"
                       @click="reviewData(3)">{{ $t("table.reject") }}</el-button>
          </div>
          <div>
            <el-button @click="dialogChartFormVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button v-if="dialogStatus == 'review' && temp.status === 1"
                       type="primary"
                       @click="reviewData(2)">{{ $t("table.pass") }}</el-button>
            <el-button v-else
                       type="primary"
                       @click="dialogChartFormVisible = false">{{ $t("table.confirm") }}</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
import { getToken } from "@/utils/auth";
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    const validateName = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 20) {
          callback(new Error("名称长度不能大于20个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)[\u4e00-\u9fff\w]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error("名称只能包含汉字、英文、“_”和数字且不为纯数字或纯符号")
            );
          }
        }
      } else {
        callback(new Error("请填写名称"));
      }
    };
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      selectRow: [],
      statusOptions: [{
        value: 1,
        label: '待审核'
      }, {
        value: 2,
        label: '已完成'
      }, {
        value: 3,
        label: '未通过'
      }],
      typeOptions: [{
        value: 1,
        label: '立即生效'
      }, {
        value: 2,
        label: '区间调价'
      }, {
        value: 3,
        label: '设定时间'
      }],
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        attribute: "",
        category_name: "",
        brand_name: "",
        supplier_name: "",
        code: "",
        merchant_name: "",
        itoc_name: "",
        merchant_circle_name: "",
        linkman: "",
        linkman_mobile: "",
        region_name: "",
        status: ""
      },
      temp: {
        id: undefined,
        code: "",
        name: "",
        attribute: "",
        category_id: undefined,
        category_name: "",
        merchant_id: undefined,
        merchant_name: "",
        itoc_id: undefined,
        itoc_name: "",
        merchant_circle_id: undefined,
        merchant_circle_name: "",
        ip: "",
        linkman: "",
        linkman_mobile: "",
        region_id: undefined,
        region_name: "",
        address: "",
        request_time: undefined,
        install_time: undefined,
        status: undefined,
        sales: undefined,
        sum_money: undefined,
        versions: "",
        pathway_number: undefined,
        longitude: "",
        latitude: "",
        details: "",
        create_time: undefined,
        update_time: undefined
      },
      dialogFormVisible: false,
      dialogChartFormVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [{ required: true, trigger: "blur", validator: validateName }]
      },
      createDisabled: true,
      updateDisabled: true,
      brandOptions: [],
      brandCount: undefined,
      circleOptions: undefined,
      circleCount: undefined,
      sortOptions: [],
      sortCount: undefined,
      pageSize: 20,
      optionProps: {
        value: 'id',
        label: 'name'
      }
    };
  },
  created() {
    const token = getToken()
    if (token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(token)
    }
    this.getList();
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        order_no: "",
        itoc_name: "",
        status: "",
        type: ""
      };
      this.getList();
    },
    searchItem() {
      if (this.showSearchItem === true) {
        this.showSearchItem = false;
      } else {
        this.showSearchItem = true;
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        order_no: this.listQuery.order_no ? this.listQuery.order_no : "",
        itoc_name: this.listQuery.itoc_name ? this.listQuery.itoc_name : "",
        status: this.listQuery.status ? this.listQuery.status : "",
        type: this.listQuery.type ? this.listQuery.type : ""
      };
      const path = {
        app: "equipment",
        api: "api_equipment_goods_itocAdjustPriceList",
        version: "1.0",
        data: data
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleCreate() {
      this.$router.push({ path: '/price-data/adjust-price-application' })
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row);
      this.dialogStatus = "read";
      const path = {
        app: "user",
        api: "api_equipment_goods_itocAdjustPriceDetails",
        version: "1.0",
        data: {
          order_no: this.temp.order_no
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleReview() {
      this.dialogStatus = "review";
    },
    reviewData(status) {
      const path = {
        app: "equipment",
        api: "api_equipment_goods_itocAdjustPriceCheck",
        version: "1.0",
        data: {
          id: this.temp.id,
          status: status,
          returnType: status
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
          } else if (resj.api === "api_equipment_goods_itocAdjustPriceList") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "api_equipment_goods_itocAdjustPriceCheck") {
            this.$notify({
              title: "成功",
              message: "审核成功",
              type: "success",
              duration: 2000
            });
            this.dialogChartFormVisible = false;
            this.getList();
          } else if (resj.api === "api_equipment_goods_itocAdjustPriceDetails") {
            this.$set(this.temp, 'list', resj.data)
            this.dialogChartFormVisible = true;
          }
        }
      }
    }
  }
};
</script>
